<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        
        #loading {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位，浮在最上层 */
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%); /* 绝对居中 */
            z-index: 999; /* 压在弹窗上，不挡按钮禁用逻辑 */
            text-align: center;
        }
        
        /* 核心：旋转动画样式 */
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f0f0f0; /* 浅灰色背景 */
            border-top: 4px solid #3498db; /* 蓝色旋转部分 */
            border-radius: 50%; /* 圆形 */
            animation: spin 1s linear infinite; /* 旋转动画 */
            margin: 20px auto; /* 居中显示 */
        }

        /* 旋转动画定义 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 可选：加载文字 */
        .loading-text {
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        
        /* 设置全局样式 */
        body {
            font-family: NSimSun, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            background-color: #fafafa;
        }

        /* 按钮样式 */
        button, .regular-button {
            cursor: pointer; /* 鼠标悬停显示为手型 */
            font-family: "Microsoft YaHei";
            background-color: white; /* 白色背景 */
            border: 1px solid #888; /* 灰色边框 */
            color: black; /* 黑色字体 */
            padding: 5px 15px;
            margin: 10px;
            text-align: center; /* 文字居中 */
            border-radius: 15px; /* 圆角边框 */
            font-size: 14px; /* 确保字体一致 */
            display: inline-block; /* 保证 label 显示为块状元素 */
            line-height: normal; /* 确保高度一致 */
        }

        /* 悬停状态：浅灰背景，深灰边框 */
        button:hover, .regular-button:hover {
            background-color: #f0f0f0;
            border-color: #666666;
        }

        /* 点击状态：深灰背景，白色文字 */
        button:active, .regular-button:active {
            background-color: #666666;
            color: #ffffff;
            border-color: #444444;
        }

        .small-btn {
            cursor: pointer; /* 鼠标悬停显示为手型 */
            border: 1px solid #888; /* 灰色边框 */
            padding: 2px 8px; /* 减小内边距（上下2px，左右8px） */
            font-size: 11px; /* 缩小字体 */
            margin: 0 2px; /* 减小按钮之间的间距 */
            border-radius: 10px; /* 小一点的圆角 */
            transition: all 0.2s; /* 过渡动画，让颜色变化更平滑 */
        }

        /* 悬停状态：背景变浅灰，边框颜色加深 */
        .small-btn:hover {
            background-color: #f0f0f0; /* 浅灰色背景 */
            border-color: #666666; /* 深一点的边框 */
        }

        /* 点击状态：背景变深灰，文字变白 */
        .small-btn:active {
            background-color: #666666; /* 深灰色背景 */
            color: #ffffff; /* 白色文字 */
            border-color: #444444; /* 更深的边框 */
        }

        /* 设置选项卡容器样式 */
        .tabs {
            flex-wrap: wrap;
            display: flex;
            justify-content: center;
            /*margin-bottom: 20px;*/
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 0px;
        }

        /* 设置单个选项卡样式 */
        .tab {
            border-radius: 0px;
            border: 1px solid #ccc;
            padding: 5px 75px;
            cursor: pointer;
            color: #555;
            transition: background-color 0.3s, color 0.3s;
            background-color: #f9f9f9;
        }

        /* 设置激活状态选项卡样式 */
        .tab.active-tab {
            background-color: #007bff;
            color: #ffffff;
        }

        /* 设置内容区域样式 */
        .content {
            display: none;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /*border-radius: 8px;*/
            width: 640px;
            text-align: center;
            overflow-y: auto;
        }

        /* 设置激活状态的内容区域样式 */
        .content.active-content {
            display: block;
        }

        #artifactTable {
            border-collapse: collapse; /* 合并边框为一条线 */
            width: 100%; /* 表格占满容器宽度 */
            font-size: 15px; /* 缩小字体（原默认约16px，12px更紧凑） */
            /*table-layout: fixed; !* 固定表格布局，避免列宽忽宽忽窄 *!*/
        }

        /* 表头和单元格样式：缩小内边距（行间距核心）、固定高度 */
        #artifactTable th,
        #artifactTable td {
            border: 1px solid #ccc; /* 保持单边框 */
            padding: 2.5px 1px; /* 缩小内边距（上下3px，左右8px，行高会显著变小） */
            text-align: center; /* 文字居中，避免换行导致高度变化 */
            white-space: nowrap; /* 强制文字不换行（防止内容过长导致行高变高） */
            overflow: hidden; /* 超出部分隐藏（配合不换行，避免表格变形） */
            text-overflow: ellipsis; /* 超出部分显示省略号（优化体验） */
            height: 30px; /* 固定行高（表头和单元格统一高度，彻底避免忽高忽矮） */
        }

        /* 表头背景色（保持区分度） */
        #artifactTable th {
            background-color: #f5f5f5;
            font-weight: normal; /* 可选：表头字体不加粗，更紧凑 */
        }

        /* 隐藏原始的文件选择按钮 */
        #fileInput {
            display: none;
        }

        #imageContainer {
            margin: 0 auto;
            width: 320px;
            height: 320px;
            border: 2px solid #ccc;
        }

        #imageContainer img {
            max-width: 100%;
            max-height: 100%;
            height: auto;
        }
    </style>
    <body>
        <div class="tabs">
            <div class="tab" data-target="tab1">上传文物图片</div>
            <div class="tab active-tab" data-target="tab2">比对文物</div>
            <div class="tab" data-target="tab3">管理文物</div>
        </div>
        <div class="content" id="tab1">
            <h3>批量上传文物图片</h3>
            
            <div style="margin:15px 0; text-align:left;">
                <label>文物编码 <span style="color:red">*</span></label><br>
                <input type="text" id="objectCode"
                       style="width:100%; padding:5px; border:1px solid #ccc; border-radius:4px;"
                       placeholder="请输入文物编码">
            </div>
            <div style="margin:15px 0; text-align:left;">
                <label>文物名称 <span style="color:red">*</span></label><br>
                <input type="text" id="objectName"
                       style="width:100%; padding:5px; border:1px solid #ccc; border-radius:4px;"
                       placeholder="如果是新增的文物，必须输入文物名称">
            </div>
            <div style="margin:15px 0; text-align:left;">
                <label>城市ID (1-999) <span style="color:red">*</span></label><br>
                <input type="number" id="classId1" min="1" max="999"
                       style="width:100%; padding:5px; border:1px solid #ccc; border-radius:4px;" placeholder="1-999">
            </div>
            <div style="margin:15px 0; text-align:left;">
                <label>景点ID (999-65535) <span style="color:red">*</span></label><br>
                <input type="number" id="classId2" min="999" max="65535"
                       style="width:100%; padding:5px; border:1px solid #ccc; border-radius:4px;"
                       placeholder="999-65535">
            </div>
            
            <div>
                <input type="file" id="batchFileInput" accept="image/*" multiple style="display:none"
                       onchange="batchPreviewImage(event)">
                <button type="button" class="regular-button"
                        onclick="document.getElementById('batchFileInput').click()">
                    选择多张图片
                </button>
            </div>
            
            <!-- 3. 预览区域（直接复用tab2的imageContainer样式，确保显示） -->
            <div id="batchPreviewContainer" style="display:flex; flex-wrap:wrap; gap:10px; margin:15px 0;"></div>
            
            <!-- 4. 上传按钮和状态 -->
            <button type="button" class="regular-button" onclick="batchUpload()">批量上传</button>
            <div id="uploadStatus" style="margin:10px 0; color:red;"></div>
        </div>
        <div class="content active-content" id="tab2">
            <div class="upload-container">
                <br>
                <input type="file" id="fileInput" name="file" accept="image/*" onchange="previewImage(event)" required>
                
                <button type="button" class="regular-button" onclick="document.getElementById('fileInput').click()">
                    选择文物图片
                </button>
            </div>
            <div id="imageContainer">
                <img id="imagePreview"
                     src=""
                     alt="图片预览">
            </div>
            <br>
            <button type="button" class="regular-button" onclick="uploadAndMatchImage()">图片比对</button>
            <br>
        </div>
        <div class="content" id="tab3">
            <div id="emptyTip" style="display:none">暂无数据</div>
            <button type="button" class="regular-button" onclick="getPage()">刷新</button>
            <div id="loading">
                <div class="spinner"></div>
                <div class="loading-text">加载中...</div>
            </div>
            <div id="tableContainer" style="
        height: 400px; /* 固定高度（根据当前合适的高度调整） */
        overflow-y: auto; /* 内容超出时显示垂直滚动条 */
        margin: 10px 0; /* 上下留一点间距 */
    ">
                <table id="artifactTable" border="1" width="100%">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>编码</th>
                            <th>名称</th>
                            <th>城市id</th>
                            <th>景区id</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="artifactTableBody"></tbody>
                </table>
            </div>
            <!-- 分页按钮（极简） -->
            <div style="margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px;">
                <button class="small-btn" onclick="changePage(-1)">上一页</button>
                <span id="pageText">第 1 页 / 共 0 页</span>
                <!-- 新增：页码输入框 + 跳转按钮 -->
                <div style="display:flex; align-items:center; gap:5px;">
                    <input
                            type="number"
                            id="pageInput"
                            min="1"
                            placeholder="页码"
                            style="width:60px; padding:5px; border:1px solid #ccc; border-radius:4px; text-align:center;"
                    >
                    <button class="small-btn" onclick="goToSpecifiedPage()">跳转</button>
                </div>
                <button class="small-btn" onclick="changePage(1)">下一页</button>
            </div>
        </div>
        <div id="modalContainer"
             style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
            <iframe id="imageUpdateForm" src="imageUpdateForm.html"
                    style="width:480px; height:420px; position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); background:white; border-radius:8px;"></iframe>
        </div>
        <script src="../js/config.js"></script>
        <script>

            var apiBaseUrl = getApiBaseUrl();
            let selectedFile = null;
            let currentPage = 1;
            const pageSize = 10;
            const loading = document.getElementById('loading');

            function openEditForm(id, code, name, classId1, classId2) {
                const container = document.getElementById('modalContainer');
                const frame = document.getElementById('imageUpdateForm');

                // 显示弹窗
                container.style.display = 'block';

                // 移除之前的onload事件（避免重复绑定）
                frame.onload = null;

                // 重新绑定load事件
                frame.onload = function onFrameLoad() {
                    // 确保iframe内容窗口存在
                    if (frame.contentWindow) {
                        // 发送数据（限制域名更安全，避免*）
                        frame.contentWindow.postMessage({
                            type: 'SET_DATA',
                            id: id,
                            code: code,
                            name: name,
                            classId1: classId1,
                            classId2: classId2
                        }, window.location.origin); // 替换为实际的iframe域名，如'http://example.com'
                    } else {
                        console.error('iframe内容窗口未就绪');
                    }
                };

                // 强制刷新iframe（解决已加载完成时onload不触发的问题）
                frame.src = frame.src;
            }

            // 监听子窗口发送的消息
            window.addEventListener('message', (event) => {
                // 验证来源（安全措施）
                if (event.origin !== window.location.origin) return;

                // 收到关闭信号后，隐藏父页面的弹窗容器
                if (event.data.type === 'CLOSE_MODAL') {
                    document.getElementById('modalContainer').style.display = 'none';
                    if(event.data.refresh === true){
                        getPage();
                    }
                }
            });


            function previewImage(event) {
                selectedFile = event.target.files[0];
                if (selectedFile) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const imagePreview = document.getElementById('imagePreview');
                        imagePreview.src = e.target.result;
                    };
                    reader.readAsDataURL(selectedFile);
                } else {
                    alert('请选择一个图片文件');
                }
            }

            async function uploadAndMatchImage() {
                if (!selectedFile) {
                    alert('请先选择图片文件');
                    return;
                }

                const formData = new FormData();
                formData.append('image', selectedFile); // 使用全局变量

                try {
                    const response = await fetch(apiBaseUrl + '/matchImage', {
                        method: 'POST',
                        body: formData
                    });

                    const jsonData = await response.json();

                    // 检查响应是否成功
                    if (!jsonData.code || !jsonData.data) {
                        throw new Error(jsonData.message || '服务器返回数据异常');
                    }
                    // 显示结果
                    alert(JSON.stringify(jsonData.data, null, 2));

                } catch (error) {
                    console.error('上传失败:', error);
                    alert('错误: ' + error.message);
                }
            }

            function selectTabs() {
                const tabs = document.querySelectorAll('.tab');
                for (let i = 0; i < tabs.length; i++) {
                    tabs[i].addEventListener('click', function () {
                        document.querySelector('.active-tab').classList.remove('active-tab');
                        document.querySelector('.active-content').classList.remove('active-content');
                        tabs[i].classList.add('active-tab');
                        const targetId = tabs[i].getAttribute('data-target');
                        document.getElementById(targetId).classList.add('active-content');
                        // 切换到tab3时加载数据（避免重复加载）
                        if (targetId === 'tab3') {
                            getPage();
                        }
                    });
                }
            }

            // 跳转到手动输入的指定页码
            function goToSpecifiedPage() {
                const pageInput = document.getElementById('pageInput');
                const inputPage = parseInt(pageInput.value.trim()); // 获取输入的页码
                const pageText = document.getElementById('pageText');
                // 从页码文本中提取总页数（比如“第1页/共5页” → 提取5）
                const totalPages = parseInt(pageText.textContent.match(/共 (\d+) 页/)[1]) || 1;

                // 输入校验
                if (isNaN(inputPage)) { // 输入不是数字
                    alert("请输入有效的页码");
                    pageInput.value = ''; // 清空输入框
                    return;
                }
                if (inputPage < 1) { // 页码小于1
                    alert("页码不能小于1");
                    pageInput.value = '1';
                    return;
                }
                if (inputPage > totalPages) { // 页码超过总页数
                    alert(`页码不能超过总页数 ${totalPages}`);
                    pageInput.value = totalPages;
                    return;
                }

                // 输入合法：更新当前页码并加载数据
                currentPage = inputPage;
                getPage();
                pageInput.value = ''; // 清空输入框（优化体验）
            }

            function changePage(type) {
                // 防止页码小于1
                if (currentPage === 1 && type === -1) {
                    alert("已经是第一页了");
                    return;
                }
                // 更新页码
                currentPage += type;
                // 重新加载当前页数据
                getPage();
            }

            async function getPage() {
                const tableBody = document.getElementById('artifactTableBody');
                const pageText = document.getElementById('pageText');
                const emptyTip = document.getElementById('emptyTip'); // 新增：获取空提示元素

                // 显示加载状态，清空旧数据
                loading.style.display = 'block';
                tableBody.innerHTML = '';
                emptyTip.style.display = 'none';
                pageText.textContent = `第 ${currentPage} 页 / 共 0 页`; // 初始显示总页数为0

                try {
                    const res = await fetch(`${apiBaseUrl}/pageArtifact`, {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            pageNo: currentPage,
                            pageSize: pageSize
                        })
                    });
                    const result = await res.json();

                    if (result.code === 200 && result.data) {
                        const {list, total} = result.data;
                        const totalPages = Math.ceil(total / pageSize); // 计算总页数（总条数/每页条数，向上取整）

                        // 渲染表格数据
                        if (Array.isArray(list) && list.length > 0) {
                            tableBody.innerHTML = '';
                            list.forEach(item => {
                                tableBody.innerHTML += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.code}</td>
                            <td>${item.name}</td>
                            <td>${item.classId1}</td>
                            <td>${item.classId2}</td>
                            <td>
                                <button class="small-btn" onclick="deleteItem(${item.id})">删除</button>
                                <button class="small-btn" onclick="openEditForm(${item.id}, '${item.code}',
                                '${item.name}', '${item.classId1}', '${item.classId2}')">修改</button>
                            </td>
                        </tr>
                    `;
                            });
                            // 更新页码文本：显示“当前页/总页数”
                            pageText.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
                        } else {
                            // 无数据时显示空提示
                            emptyTip.style.display = 'block';
                            pageText.textContent = `第 ${currentPage} 页 / 共 0 页`;
                        }

                        // 处理最后一页无数据的情况
                        if (list.length === 0 && currentPage > 1) {
                            currentPage--;
                            await getPage();
                        }
                    }
                } catch (err) {
                    console.error("加载失败", err);
                    alert("加载失败，请重试");
                    pageText.textContent = `第 ${currentPage} 页 / 共 0 页`;
                } finally {
                    loading.style.display = 'none';
                }
            }

            document.addEventListener('DOMContentLoaded', function () {
                // 获取所有选项卡和内容区域
                var tabs = document.querySelectorAll('.tab');
                var contents = document.querySelectorAll('.content');

                // 调用方法来激活选项卡
                selectTabs(tabs, contents);
            });

            // 批量预览图片（完整修复版，仅改此函数）
            function batchPreviewImage(event) {
                const files = event.target.files;
                const previewContainer = document.getElementById('batchPreviewContainer');

                // 1. 初始化空数组（每次选择都重新初始化，避免残留旧数据）
                window.batchSelectedFiles = [];
                // 清空预览区域
                previewContainer.innerHTML = '';

                // 2. 先判断是否有文件，无文件直接返回
                if (!files || files.length === 0) {
                    alert('请选择图片文件');
                    return;
                }

                // 3. 遍历文件时，先验证再添加到数组（确保数组中只有有效图片）
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    // 验证图片格式
                    if (!file.type.startsWith('image/')) {
                        alert(`"${file.name}"不是图片格式（支持JPG/PNG/GIF），已跳过`);
                        continue; // 跳过无效文件，不添加到数组
                    }

                    // 4. 先将有效文件添加到全局数组（关键：提前添加，确保后续能读取到）
                    window.batchSelectedFiles.push(file);

                    // 5. 正常预览逻辑（不变）
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const imgContainer = document.createElement('div');
                        imgContainer.style.width = '160px';
                        imgContainer.style.height = '160px';
                        imgContainer.style.border = '2px solid #ccc';
                        imgContainer.style.margin = '10px';
                        imgContainer.style.display = 'flex';
                        imgContainer.style.alignItems = 'center';
                        imgContainer.style.justifyContent = 'center';

                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.maxWidth = '100%';
                        img.style.maxHeight = '100%';
                        img.style.height = 'auto';
                        img.alt = file.name;

                        imgContainer.appendChild(img);
                        previewContainer.appendChild(imgContainer);
                    };

                    reader.readAsDataURL(file);
                }

                // 6. 验证：选择完成后打印数组长度（方便调试，可选）
                console.log('已选择有效图片数量：', window.batchSelectedFiles.length);

                // 清空input，允许重复选择
                event.target.value = '';
            }

            // 批量上传函数（保持不变）
            async function batchUpload() {
                const objectCode = document.getElementById('objectCode').value.trim();
                const objectName = document.getElementById('objectName').value.trim();
                const classId1 = document.getElementById('classId1').value.trim();
                const classId2 = document.getElementById('classId2').value.trim();
                const statusDiv = document.getElementById('uploadStatus');
                const selectedFiles = window.batchSelectedFiles;

                // 验证
                if (!objectCode) {
                    statusDiv.textContent = '请输入文物编码';
                    return;
                }
                if (!classId1 || classId1 < 1 || classId1 > 999) {
                    statusDiv.textContent = '城市ID必须1-999';
                    return;
                }
                if (!classId2 || classId2 < 999 || classId2 > 65535) {
                    statusDiv.textContent = '景点ID必须999-65535';
                    return;
                }
                if (!selectedFiles || selectedFiles.length === 0) {
                    statusDiv.textContent = '请选择图片';
                    return;
                }

                // 构建表单数据
                const formData = new FormData();
                for (let i = 0; i < selectedFiles.length; i++) {
                    formData.append('images', selectedFiles[i]);
                }
                formData.append('objectCode', objectCode);
                if (objectName) formData.append('objectName', objectName);
                formData.append('classId1', classId1);
                formData.append('classId2', classId2);

                // 上传
                statusDiv.textContent = '上传中...';
                try {
                    const response = await fetch(apiBaseUrl + '/batchUploadTemplateImage', {
                        method: 'POST',
                        body: formData
                    });
                    const result = await response.json();
                    if (result.code === 200) {
                        statusDiv.textContent = '上传成功！结果：' + JSON.stringify(result.data);
                        // 清空预览
                        document.getElementById('batchPreviewContainer').innerHTML = '';
                        window.batchSelectedFiles = null;
                    } else {
                        statusDiv.textContent = '上传失败：' + (result.message || '未知错误');
                    }
                } catch (error) {
                    statusDiv.textContent = '上传出错：' + error.message;
                }
            }

            // 删除功能（简单实现）
            function deleteItem(id) {
                if (confirm(`确定要删除ID为${id}的文物吗？`)) {
                    loading.style.display = 'block';
                    // 这里写删除请求逻辑，删除成功后重新加载当前页
                    fetch(`${apiBaseUrl}/deleteArtifact?id=${id}`, {method: 'GET'})
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 200) {
                                alert("删除成功");
                                loading.style.display = 'none';
                                getPage(); // 重新加载当前页
                            }
                        });
                }
            }
        </script>
    </body>
</html>